<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
        <!-- 小按钮 -->
        <button onclick="clickFun()">小按钮</button>

        <!-- 右键菜单 -->
		<ul id="rightMenu" style="width: 100px;">
			<li onclick="notify()">通知</li>
			<li onclick="closed()">关闭</li>
		</ul>

        <div id="notify"></div>
        
	</body>

    
    <script>
        
        // 闭包-大对象
        (()=>{
                window.smallFun = ( val )=>{
                    alert(val)
                }

                window.dbin= {
                    myfun: ( val = 'hi' ) => {
                        alert(val)
                    }
                }

                window.this = {}
        })()

        // 自定义 监听事件
        window.addEventListener("myEvent",function (){ notify(3)})

        function clickFun() {
            // 1.创建自定义事件
            var event = document.createEvent("HTMLEvents");
            // 2.初始化testEvent事件
            event.initEvent("myEvent", false, true);
            event.data = {"click":true};
            // 3.触发自定义事件
            window.dispatchEvent(event);
        }

        function closed() {
            // var menu = document.getElementById("rightMenu");
            // menu.style.display = "none";
            notify('llll')
        }

        function notify(msg = "hii") {
            
            var menu = document.getElementById("rightMenu");
            menu.style.display = "none";

            let notifyDom = document.getElementById("notify")
            notifyDom.style.display = 'block'
            notifyDom.textContent = msg
            
            setTimeout(()=>{
                notifyDom.style.display = "none"
            },3000)

        }


    </script>

    <script type="text/javascript">

        //提取到函数外面作为全局变量
        var menu=document.getElementById("rightMenu");
        
        //自定义一个浏览器右键菜单，单击右键是显示它
        //oncontextmenu上下文菜单事件，右键菜单
        document.documentElement.oncontextmenu=function (event) {
            //显示我们自己定义的右键菜单
            //1.找到菜单
            //提取到函数外面作为全局变量
            
            //兼容Event对象
            event=event || window.event;
            
            //2.设置菜单的位置等于鼠标的坐标
            //判断：如果鼠标的位置+菜单的宽度>网页的宽度，那么就改为右边定位
            //鼠标坐标
            var mx=event.clientX;
            var my=event.clientY;
            //菜单宽度
            var menuWidth=parseInt(menu.style.width);
            //网页的宽度(高度用同样的方法解决)
            var pageWidth=document.documentElement.clientWidth;
            //console.log(pageWidth);
            if((mx+menuWidth)<pageWidth){
                menu.style.left=mx+"px";
                menu.style.top=my+"px";
            }else{
                menu.style.right=mx+"px";
                menu.style.top=my+"px";
            }
            
            //3.显示右键菜单
            menu.style.display="block";
            // alert('display: block');
            
            //阻止默认的右键菜单显示
            return false;
        };
        
        //任何点击 隐藏菜单
        // document.documentElement.onclick=function () {
        //     menu.style.display="none";
        //     // alert('display: none');
        // }

    </script>

    <style type="text/css">

        @keyframes notify {
            from {
                top: -50px

            };
            to {
                top: 50px
            };
        }

        #notify
        {
            position: absolute;
            background: rgb(173, 226, 93);
            top: 30px;
            left: calc( 50% - 200px );
            height: 50px;
            width: 300px;

            border-radius: 5px;
            text-align: center;
            vertical-align: middle;

            font-weight: bold;

            /* animation-duration: 2s; */
            animation: notify 1s;
            -webkit-animation: notify 1s;
            display: none;

        }

        #rightMenu
        {
            list-style: none;
            background: rgb(255, 255, 255);
            border: solid 1px darkgrey;
            border-radius: 10px;
            margin: 0px;
            padding: 5px;
            position: absolute;
            /*left: 0px;*/
            top: 0px;
            display: none;
        }
        
        #rightMenu li
        {
            cursor: pointer;
            border-bottom: solid 1px rgb(252, 215, 215);
        }
    </style>
</html>